// 基于原生Js 编写事件 
// addEventListener("click",fn,true/false);  false/true 冒泡/捕获   默认false 冒泡 
// onclick  onchange  onfocus
// <p onclick="get()"></p>

// jquery 
// $("div").on("click")    $("div").off("click")
// $('div').bind('click')  绑定   $('div').unbind('click')

// 事件委托  把事件绑定到父元素上   子元素触发事件   通过事件冒泡  让父元素代替子元素执行冒泡的事件   
// $("div").on("click",childnode,fn);
// $("div").delegate(childnode,'click',fn)


// vue
// v-on:click = "get()"
// @input = "input($event)"  $event 事件对象 


// react 绑定事件  驼峰命名

// onClick
// onChange
// onInput
// onMouseMove
// onMouseDown
// onMouseUp
// onTouchStart
// onTouchMove
// onTouchEnd
// onKeyPress
// onKeyDown
// onKeyUp

// 绑定事件 
// 1. 全局变量 / 外部函数
// 2. 组件内部自定义函数
// 3. 原型链挂载 
import {mixins} from "~/common.js"
const actions = {
   fnA(){
     console.log("Are you OK????")
   },
   fnOne(e){
     console.log(e)
    console.log("wuhan2107-daydayup")
   },
   fnTwo(e,msg){
    //  msg = event 事件对象 
    
    var e = e || window.event
    if(e.stopPropagation){
      e.stopPropagation() 
    }else{  
      e.cancelBubble = true 
    }
    console.log(msg);
   },
   parent(){
     console.log("parent - parent- -parent ")
   }
}
const msg = "daydayup"
export default class CptEvent extends Component{

  constructor(){
    
     super()
     console.log(this)
     this.chechThisFour = this.chechThisFour.bind(this)
  }
  handleInput(e){
    console.log(e.target.value)
  }
  handleChange(e){
    console.log(e.target.value)
  }
  handleKeyPress(e){
    // console.log(e)
    console.log(e.charCode)
    console.log(e.keyCode)
  }
  // 自定义函数 的 this 为 undefined 
  checkThisOne(){
    console.log(this)
  }
  checkThisTwo(){
    console.log(this)
  }
  checkThisThree=()=>{
    console.log(this)
  }
  chechThisFour(){
    console.log(this)
  }
  render(){
    console.log(this)

    return (
       <div className="cssbox">
         <h2 onClick={ actions.fnA }  > React 里面如何定义事件 </h2>
         <div className="parent" onClick={actions.parent }>
            <h3 className="one" onClick={actions.fnOne} >
              wuhan2107-daydayup
            </h3>
            <h3 className="two" onClick={ (event)=> actions.fnTwo(event,'wuhan2107-说好的转介绍呢...') }>
            wuhan2107-说好的转介绍呢...
            </h3>
            <h3 onClick={mixins.clickone} >快乐的学习 React </h3>
         </div>
         <p>
           <input onInput={this.handleInput}  type="text"  placeholder="input" />
         </p>
         <p>
           <input value={msg}  onChange={this.handleChange}   type="text"  placeholder="change" />
         </p>
         <p>
           <input  onKeyPress={this.handleKeyPress}   type="text"  placeholder="keypress" />
         </p>
         <p>
           <input  onKeyUp={this.handleKeyPress}   type="text"  placeholder="keyup" />
         </p>
         <div onTouchStart={mixins.touchstart} style={{width:300,height:300,background:"pink"}}>
           touch - touch - touch 
         </div>
         
         <button onClick={this.checkThisOne}>测试this-1 </button>
         <button onClick={()=>this.checkThisTwo() }>测试this-2-two </button>
         <button onClick={this.checkThisThree }>测试this-3-three </button>
         <button onClick={this.chechThisFour }>测试this-4-four  </button>


         <hr/>
         <MyList></MyList>
       </div>
    )
  }
}

// 箭头函数 
// 1. 箭头函数本身没有this 它会借用当前函数外部代码块的this 
// 2. 箭头函数的this指向 跟函数初始化定义时候的环境有关  跟函数执行时候的this 无关 

const flag = false  
const arr = ["旭旭","老余","小左","老高","拉拉"]
class MyList extends Component{
  constructor(){
     super()
  }
  render(){
    return (
      <div>
        <h2> List - List - List </h2>
        <p>模拟实现 v-if && v-for </p>
        <div>
           {
             flag && <div>我们明天就要放假了... v-if </div>
           }
           {
             !flag && <h4>做梦吧,老老实实快点学东西... v-else  </h4>
           }
        </div>
        <div>
           {
             arr.map((l,i)=>{
               return (
                 <p key={i}  >
                   {l} -- {i}
                 </p>
               )
             })
           }
        </div>
      </div>
    )
  }
}

// class Component{
//   constructor(){

//   }

//   render(){

//   }

//   componentDidMount(){

//   }

//   componentDidUpdate(){

//   }
//   componentWillUnmount(){

//   }
// }